HTMLのtitle要素やOGPなどのメタデータは「ページ」ごとに変えるとよさそう(特にSPAで)

HTMLのtitle要素とは

MDNによると、title要素は:

title は HTML の要素で、ブラウザーのタイトルバーやページのタブに表示される文書の題名を定義します。テキストのみを含めることができます。要素内のタグはすべて無視されます。

と記載されています。

ブラウザーのブックマークに追加した際にも、ページのタイトルがブックマークのUIに表示されます。

title要素の役割

title要素には、ブラウザーのUIに表示される以外にも、重要な役割が3つあります。

1. 検索エンジンでのリンクテキストとしての利用

最近では、ほとんどのWebサイトやWebアプリケーションが「検索によって発見される」ケースが多くなってきました。「検索できないコンテンツは、存在しないも同然」といった言説さえあるようです。

こうした、検索エンジンでの検索結果においては、多くがtitle要素の値をリンクテキストにします。

title要素が適切でないと、検索結果においてクリックされないこととなり、検索流入などが低下することになります。

Google 検索セントラル ブログの 検索結果によりよいタイトルをによれば、

しかしどのような検索キーワードに対しても常に title タグに書かれているものをそのまま表示してしまうと、ユーザーにとってはそのタイトルは検索キーワードと関連性が低いように見えることもあるかもしれません。そのような場合にそのページが検索キーワードと関連性が高いものであると気づいてもらうため、Google では代わりのタイトルを生成するアルゴリズムを利用することがあります。Google のテストでは、ほとんどの場合においてこれらの代わりのタイトルの方が元のタイトルよりも検索キーワードに対して高い関連性を示しました。また、これらの代わりのタイトルを使用することによりタイトルのクリック率は大幅に向上しており、検索をするユーザーとウェブマスターの皆さんの双方に役立っていました。これが Google が代わりのタイトルを表示する理由の半分です。

とのことで、必ずしも付与したtitle要素の値が検索結果に採用されるケースばかりではなさそうです。

例えば、Googleで「クラスメソッド」と検索すると、広告の次のタイトルは

クラスメソッド｜AWS活用でコスト削減、アジリティ ...

となっており、HTMLの記述:

<title>クラスメソッド｜AWS活用でコスト削減、アジリティ、セキュリティを実現するテックカンパニー</title>

と比較すると、後半が省略された形になっています。

しかし、正確でわかりやすいページタイトルを付与することは、検索エンジン用にサイトを最適化するのトップ項目に挙げられており、また他の検索エンジンでの検索結果にもよい影響を与えると考えられます。

2. 支援技術の利用者がページを識別する手段としての利用

例えば、視覚に障害のあるユーザーがWebサイトを利用する場合には、スクリーン・リーダーと呼ばれる、画面情報を音声で読み上げて操作を支援するソフトウェア(支援技術)が利用されます。

ブラウザーで表示させたページをスクリーン・リーダーで読み上げた場合、まず最初にtitle要素の内容が読み上げられることが多くあります。

MDNによると

支援技術を使用するユーザーのためのナビゲーション技術として、ページの題名を読んで、どのようなコンテンツが含まれるかを知るというものが良く使われます。これはコンテンツを特定するためにページ間を移動すると、時間を消費したり手順を間違える可能性があったりするからです。

ページを目で見ることができない場合、ページ全体を音声で読み上げなければ内容が把握できないと、目的のページを探すのに大変な時間がかかります。そこで、開いたページが、自分の目的とするページか否かを判断するのに、最初に読み上げられるページタイトルを用いるのです。

例えば、オープンソースで開発され、無料で利用できるNVDAを用いて、クラスメソッドのトップページを読み上げさせて、その音声を文字にしてみると、冒頭は以下のようになります。

クラスメソッド｜AWS活用でコスト削減、アジリティ、セキュリティを実現するテックカンパニー
クリック可能  バナー ランドマーク    見出し    レベル1    リンク    画像    クラスメソッド株式会社
ナビゲーション ランドマーク
リスト  7項目
リンク    強み
リンク    サービス
リンク    事例
リンク    セミナー・相談会
リンク    会社情報
リンク    採用情報
リンク    資料請求
リストの外

最初の1行目が、title要素の値そのままになっています。

こうした、アクセシビリティ面でのtitle要素の考慮事項について、MDNでは:

ページの状態が大きく変わったことを示すために (フォーム検証の問題など)、ユーザーを支援するために、ページの title の値を更新してください。

と記載されています。スクリーン・リーダーのユーザーが、ページのおおまかな概要を把握できる、というtitle要素の利用用途を考えると、納得できる事項と考えます。

ここで、アクセシビリティ基準のデファクト・スタンダードであるWCAG(Web Content Accessibility Guidelines) 2.1の関連文書であるUnderstanding WCAG 2.1を参照してみましょう。なお、ここではウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが公開している日本語版を引用します。

まず、該当箇所は達成基準 2.4.2: ページタイトルを理解するです。この達成基準はレベルAとされていますので、どのWebページ、Webアプリケーションでも最低限は守るべき項目かと考えます。

その達成方法G88: ウェブページに説明的なタイトルを提供するには:

各ウェブページのタイトルは次の要件を満たすべきである:

• そのウェブページの主題を特定している。
• 例えば、スクリーンリーダー、サイトマップ、検索結果一覧など、コンテキストから外れた読み方をしても意味をなす。
• 簡潔である。

次のようなページタイトルはさらに有益である。

• ウェブページが属するサイト又はその他のリソースを特定している
• ウェブページが属するサイト又はその他のリソースの中で、ユニークである

と記載があります。MDNの記述と併せて考慮して、title要素の値は、できるだけリソースの中でユニークにする方がよさそうです。

3. 「リンクをシェア」した際のページの識別子としての利用

• URLをTwitterやfacebookでシェアした
• SlackでURLを貼り付けてリンクをシェアした
• NotionのページにURLを貼り付けた

ような場合は、HTMLのmeta要素にOGP (The Open Graph protocol)やTwitter Cardsで記載されたメタデータが展開されます。

シェアされたURLを、SNSのフォロワーやSlackの利用者に「注目いただく」ことを考えた場合、ユニークで適切なtitleが付与されていなければ、シェアの効果が低下することも考えられます。

SPAの実装における考慮点

SPA (Single-page application)の実装においては、表示内容の実装に主眼がおかれます。

また、SPAであることにより、UIとしての「ページ」が遷移したとしても、それは動的に表示された内容であるため、ブラウザーとしては、その名のとおり「単一のページ」として扱われます。

よって、何も考慮がされていない場合は、往々にして「UI上でページが遷移している(画面が大きく変化している)のに、title要素やメタデータの内容が変化しない」という実装になることがあります。

しかし、ここまで述べてきた理由により、UI上の「ページ」が遷移した場合、あるいはページの状態が大きく変化した場合には、title要素やメタデータについても、動的に変更することが望ましいと考えます。

まとめ

WebページやWebアプリケーションにおけるtitle要素の役割についてご説明しました。また、その値については、簡潔で、そのページの主題を特定しており、できればリソース内においてユニークであることが望ましく、特にSPAの実装において注意した方がよい理由についてご説明しました。